<template>
  <div>
    <div id="panel"></div>
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  serviceHost: 'https://www.beautymz.com/_AMapService',
};
export default {
  name: 'antImges',
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    // this.initMap();
  },
  methods: {
    initMap(searchVal, cityName) {
      const that = this
      AMapLoader.load({
        key: '6e298564d59e3a70c642287b6427b5ab', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Marker','AMap.Circle'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          that.map = new AMap.Map('container', {
            zoom: 4, //初始化地图级别
            center: [113.65553, 34.748764], //初始化地图中心点位置
          });

          // that.auto = new AMap.Autocomplete({
          //   input : 'tipinput' // 搜索框的id 
          // }); 
          var placeSearch = new AMap.PlaceSearch({
            pageSize: 1, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: cityName, // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: that.map, // 展现结果的地图实例
            // panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          let latVal = 0;
          let lngVal = 0;
          //关键字查询
          placeSearch.search(searchVal, function (status, result) {
            latVal = result.poiList.pois[0].location.lat
            lngVal = result.poiList.pois[0].location.lng
            // 查询成功时，result即对应匹配的POI信息
            //点标记
            var marker = new AMap.Marker({
              icon: "http://file-dev.beautymz.com/merchant/77c0e630d48a4f8daf764ef7cddb57934054177262661.png",
              position: [lngVal, latVal],
              draggable: true,
              offset: new AMap.Pixel(-50, -50)
              // position: new AMap.LngLat(latVal, lngVal), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              // draggable: true,  
              // title: 'hhhhhhh'
            });
            marker.setMap(that.map);
            //圆形
            var circleAttr = {
              radius: 500,  //半径
              strokeColor: "#F33",  //线颜色
              strokeOpacity: 1,  //线透明度
              strokeWeight: 3,  //线粗细度
              fillColor: "#ee2200",  //填充颜色
              fillOpacity: 0.35 //填充透明度
            }
            var circle = new AMap.Circle({
              ...circleAttr,
              center: new AMap.LngLat(lngVal, latVal), // 圆心位置
            });
            that.$emit("dragendMap",{lng:lngVal, lat:latVal})
            that.map.add(circle);
            //点标注的点击事件
            marker.on('dragend', function(e) {
              let latValNew = e.lnglat.lat
              let lngValNew = e.lnglat.lng
              that.map.remove(circle);
              circle = new AMap.Circle({
                ...circleAttr,
                center: new AMap.LngLat(lngValNew, latValNew), // 圆心位置
              });
              that.$emit("dragendMap",{lng:lngValNew, lat:latValNew})
              that.map.add(circle);
            });
          })
        })
        .catch((e) => {
          console.log(e);
        });
    },
    editMap(record){
      let lon = record.lon ? record.lon : 113.65553
      let lat = record.lat ? record.lat : 34.748764

      const that = this
      AMapLoader.load({
        key: '6e298564d59e3a70c642287b6427b5ab', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Marker','AMap.Circle'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          that.map = new AMap.Map('container', {
            zoom: 16, //初始化地图级别
            center: [lon, lat], //初始化地图中心点位置
          });
          
          // 查询成功时，result即对应匹配的POI信息
          //点标记
          var marker = new AMap.Marker({
            icon: "http://file-dev.beautymz.com/merchant/77c0e630d48a4f8daf764ef7cddb57934054177262661.png",
            position: [lon, lat],
            draggable: true,
            offset: new AMap.Pixel(-50, -50)
          });
          marker.setMap(that.map);
          //圆形
          var circleAttr = {
            radius: 500,  //半径
            strokeColor: "#F33",  //线颜色
            strokeOpacity: 1,  //线透明度
            strokeWeight: 3,  //线粗细度
            fillColor: "#ee2200",  //填充颜色
            fillOpacity: 0.35 //填充透明度
          }
          var circle = new AMap.Circle({
            ...circleAttr,
            center: new AMap.LngLat(lon, lat), // 圆心位置
          });
          that.$emit("dragendMap",{lng:lon, lat:lat})
          that.map.add(circle);
          //点标注的点击事件
          marker.on('dragend', function(e) {
            let latValNew = e.lnglat.lat
            let lngValNew = e.lnglat.lng
            that.map.remove(circle);
            circle = new AMap.Circle({
              ...circleAttr,
              center: new AMap.LngLat(lngValNew, latValNew), // 圆心位置
            });
            that.$emit("dragendMap",{lng:lngValNew, lat:latValNew})
            that.map.add(circle);
          });
        })
        .catch((e) => {
          console.log(e);
        });  
    },
    select(e) {
      console.log("触发",e)
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name);  //关键字查询查询
    },
  },
};
</script>

<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>